<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子向父传值</title>
</head>
<body>
    <div id="app">
        <div>我是父亲，age is{{age}}</div>
        <one-component @add-father-age="addAge"></one-component>
    </div>
    
</body>
<script src="../day06/lib/vue.js"></script>
<script>
    let oneComponent = {
            data() {
                return {
                    name: '李四',
                    age:100
                }
            },
            template:
                `
        <div style="border:1px solid #ccc;">
            <div>我叫{{name}}，我是compontn ,age is{{age}}</div>
            <button @click="add">点击我增加父元素年龄</button>
        </div>
        `,
          methods:{
            add(){
               this.$emit('add-father-age',10)
                
            }
          }

        }
     new Vue({
            el: '#app',
            data: {
                age: 10
            },
            components: {
                oneComponent
            },
            methods:{
                addAge(val){
                    this.age+=val
                }
            }
        })
</script>
</html>